<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 CSS 栅格</title>
    <link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
    <script src="script/jquery-1.10.min.js"></script>
    <script src="script/bootstrap-3.3.7.min.js"></script>

    <!-- 移动设备支持/ -->
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <style type="text/css">
    /*定义HTML标签样式 */
            h1 {color:red} 
            p {color:blue}

            body { /*所有body中  所定义的样式*/
                text-align: center
            }

/*div标签并且 ID是 tj3的 并且有tj4类 */
            div#tj3.tj4 {  
                background-color: #00aa00
            }
            
            .tj { /*定义样式类*/
                background-color: #00ff00;
                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
            }

            .tj1 {
                background-color: #ff00ff;
                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
            }

            .tj2{
                background-color: #00aa00;
                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
            }


    </style>
</head>
<body>
    <div id="tj3" class="tj4">这里是CSS</div>

    <!-- container定义栅格区域 -->
    <div class="container"> 
        <div>
            <h1>栅格</h1>
        </div>

        <div class="row">
            <div class="col-md-6 col-xs-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">col-md-6</div>
            <div class="col-md-6 col-xs-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">col-md-6</div>


        </div>
        <div class="row">
            <div class="col-md-4 col-xs-4 tj">col-md-4使用class 定义css</div>
            <div class="col-md-4 col-xs-4 tj">col-md-4</div>
            <div class="col-md-4 col-xs-4 tj">col-md-4</div>

        </div>

    </div>

    <p></p>

    <div class="container">
        <div >
            <h1>偏移列</h1>
        </div>

        <div class="row">
            <div class="col-md-6 col-xs-6 col-xs-offset-4 tj1">往右偏移4列</div>

        </div>

        <div class="row">
            <div class="col-md-6 col-xs-6 tj1">未偏移</div>

        </div>
    </div>


    <div class="container">
        <div >
            <h1>嵌套列</h1>
        </div>

        <div class="row">
            <div class="col-md-6 col-xs-6 tj2">第一行第一列</div>
            
            <div class="col-md-6 col-xs-6 tj2">第一行第二列
                <div class="row" style="background-color: #00ff00">
                    <div class="col-xs-6">嵌套 的 第一行第一列</div>
                    <div class="col-xs-6">嵌套 的 第一行第二列</div>
                </div>
            </div>

        </div>

    </div>


</body>
</html>